<script setup>
import { ref } from 'vue'

const currentMonth = ref('2024-02')
const selectedDate = ref(null)

const monthlyEvents = ref([
  {
    date: '2024-02-04',
    events: [
      {
        id: 1,
        title: '立春祈福',
        time: '09:00-10:30',
        type: 'festival',
        location: '城市公园',
        description: '参加立春节气传统活动'
      }
    ]
  },
  {
    date: '2024-02-19',
    events: [
      {
        id: 2,
        title: '雨水茶会',
        time: '14:00-16:00',
        type: 'activity',
        location: '茶艺馆',
        description: '品尝节气茶，交流茶道文化'
      },
      {
        id: 3,
        title: '插花学习',
        time: '16:30-18:00',
        type: 'class',
        location: '文化中心',
        description: '学习节气花艺'
      }
    ]
  }
])

const solarTermReminders = ref([
  {
    term: '立春',
    date: '2024-02-04',
    tips: [
      '准备立春祈福活动',
      '采购节气食材',
      '整理春季衣物'
    ]
  },
  {
    term: '雨水',
    date: '2024-02-19',
    tips: [
      '准备茶道用具',
      '关注天气变化',
      '准备插花工具'
    ]
  }
])

const addNewEvent = () => {
  // 添加新事件的逻辑
}

const showEventDetail = (event) => {
  selectedDate.value = event
}
</script>

<template>
  <div class="planner-container">
    <div class="main-content">
      <div class="calendar-section">
        <div class="calendar-header">
          <h2>节气日程安排</h2>
          <button class="add-event-btn" @click="addNewEvent">
            <span class="icon">+</span>
            添加活动
          </button>
        </div>

        <div class="calendar-grid">
          <div class="calendar-nav">
            <button class="nav-btn">◀</button>
            <span class="current-month">2024年2月</span>
            <button class="nav-btn">▶</button>
          </div>
          
          <div class="weekdays">
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
          </div>

          <div class="days-grid">
            <!-- 这里可以用v-for渲染日期格子 -->
            <div 
              v-for="day in 31" 
              :key="day"
              class="day-cell"
              :class="{ 'has-event': day === 4 || day === 19 }"
            >
              <span class="day-number">{{ day }}</span>
              <div v-if="day === 4" class="event-marker festival">立春</div>
              <div v-if="day === 19" class="event-marker activity">雨水</div>
            </div>
          </div>
        </div>
      </div>

      <div class="events-timeline">
        <h3>本月活动</h3>
        <div class="timeline">
          <div 
            v-for="dayEvents in monthlyEvents" 
            :key="dayEvents.date"
            class="timeline-day"
          >
            <div class="timeline-date">
              <span class="date">{{ dayEvents.date.split('-')[2] }}日</span>
            </div>
            <div class="timeline-events">
              <div 
                v-for="event in dayEvents.events"
                :key="event.id"
                class="timeline-event"
                :class="event.type"
                @click="showEventDetail(event)"
              >
                <div class="event-time">{{ event.time }}</div>
                <div class="event-content">
                  <div class="event-title">{{ event.title }}</div>
                  <div class="event-location">{{ event.location }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="side-panel">
      <div class="reminders-section">
        <h3>节气提醒</h3>
        <div class="reminders-list">
          <div 
            v-for="reminder in solarTermReminders"
            :key="reminder.term"
            class="reminder-card"
          >
            <div class="reminder-header">
              <h4>{{ reminder.term }}</h4>
              <span class="reminder-date">{{ reminder.date }}</span>
            </div>
            <ul class="reminder-tips">
              <li v-for="(tip, index) in reminder.tips" :key="index">
                {{ tip }}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="quick-actions">
        <h3>快捷操作</h3>
        <div class="actions-grid">
          <button class="action-btn">
            <span class="action-icon">📅</span>
            导出日程
          </button>
          <button class="action-btn">
            <span class="action-icon">🔔</span>
            设置提醒
          </button>
          <button class="action-btn">
            <span class="action-icon">🔄</span>
            同步日历
          </button>
          <button class="action-btn">
            <span class="action-icon">📊</span>
            活动统计
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.planner-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  min-height: calc(100vh - 72px);
  padding: 20px;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.calendar-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.calendar-header h2 {
  font-size: 24px;
  color: #4a4a4a;
  font-family: "STKaiti", "KaiTi", serif;
}

.add-event-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #e3624b;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.add-event-btn:hover {
  background: #d15a44;
}

.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.nav-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px 8px;
}

.current-month {
  font-size: 18px;
  color: #4a4a4a;
  font-family: "STKaiti", "KaiTi", serif;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  color: #666;
  margin-bottom: 8px;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.day-cell {
  aspect-ratio: 1;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}

.day-cell:hover {
  background: #f8f8f8;
}

.day-cell.has-event {
  background: #fff9f8;
}

.day-number {
  font-size: 14px;
  color: #4a4a4a;
}

.event-marker {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
}

.event-marker.festival {
  background: rgba(227, 98, 75, 0.1);
  color: #e3624b;
}

.event-marker.activity {
  background: rgba(66, 185, 131, 0.1);
  color: #42b983;
}

.events-timeline {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.events-timeline h3 {
  font-size: 20px;
  color: #4a4a4a;
  margin-bottom: 20px;
  font-family: "STKaiti", "KaiTi", serif;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.timeline-day {
  display: flex;
  gap: 16px;
}

.timeline-date {
  min-width: 60px;
  text-align: center;
}

.timeline-date .date {
  font-size: 18px;
  color: #4a4a4a;
  font-weight: 500;
}

.timeline-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-event {
  display: flex;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
}

.timeline-event:hover {
  transform: translateX(4px);
}

.timeline-event.festival {
  background: rgba(227, 98, 75, 0.1);
}

.timeline-event.activity {
  background: rgba(66, 185, 131, 0.1);
}

.timeline-event.class {
  background: rgba(74, 144, 226, 0.1);
}

.event-time {
  color: #666;
  font-size: 14px;
}

.event-content {
  flex: 1;
}

.event-title {
  font-weight: 500;
  color: #4a4a4a;
  margin-bottom: 4px;
}

.event-location {
  font-size: 14px;
  color: #666;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.reminders-section,
.quick-actions {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.reminders-section h3,
.quick-actions h3 {
  font-size: 18px;
  color: #4a4a4a;
  margin-bottom: 16px;
  font-family: "STKaiti", "KaiTi", serif;
}

.reminders-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reminder-card {
  background: #f8f8f8;
  border-radius: 12px;
  padding: 16px;
}

.reminder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.reminder-header h4 {
  color: #e3624b;
  font-family: "STKaiti", "KaiTi", serif;
}

.reminder-date {
  font-size: 14px;
  color: #666;
}

.reminder-tips {
  list-style: none;
  padding: 0;
}

.reminder-tips li {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.reminder-tips li::before {
  content: '•';
  position: absolute;
  left: 8px;
  color: #e3624b;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #f8f8f8;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
}

.action-icon {
  font-size: 24px;
}

@media (min-width: 1920px) {
  .planner-container {
    grid-template-columns: 1fr 400px;
  }
}
</style> 